<template>

  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column;">

      <!--      <el-image style="width: 40px;height: 40px;object-fit: cover;flex-grow: 1;display: block" src="/profile/upload/2024/12/01/个旧_20241201000301A005.jpg"></el-image>-->

      <img @click="playLive" style="width: 80px;position: absolute;left: 64px;top:16px;border-radius: 50%"
           src="../../../assets/images/云南省教指委.jpg">

      <img @click="playLive" style="width: 80px;position: absolute;right: 64px;top:16px;border-radius: 50%"
           src="../../../assets/images/鹤庆.jpg">
      <div
          style="font-size: 32px;color: gold;margin-top: 16px;text-align: center;display: flex;flex-direction: row;padding: 0px 32px;height: 120px">
        <div style="display: flex;flex-direction: column;flex: 1;align-items: center;position: relative">
          <span style="justify-self: center;font-size: 42px">{{ userStore.race.name }}</span>
          <span style="position: absolute;right: 32px;bottom: 0px"
                v-if="showSubList[showSubIndex]!=null && groupList[showGroupIndex]!=null"> {{
              showSubList[showSubIndex].title
            }}-{{ groupList[showGroupIndex].gropuName }}</span>
          <dv-decoration-5 :color="['#ff793e', '#ff793e']" style="width:1400px;height:80px;"/>


        </div>


        <!--        <audio loop style="display: none" ref="audioPlayer" :src="warning_play_audio" controls></audio>-->

        <!--        <audio style="display: none" ref="audioPlayer2" :src="onlotterySrc" controls></audio>-->


      </div>

      <div
          style="flex: 1;padding: 32px;display: flex;flex-direction: column;box-sizing: border-box;background: rgba(255,255,255,0.8);border-radius: 32px;margin: 16px">
        <div style="flex-grow: 1;">
          <dv-scroll-board :config="scoreListConfig" style="width:100%;max-height:100%;"/>
        </div>

      </div>

      <dv-decoration-7 :color="['#ffeca8', 'gold']" style="width:auto;height:30px;align-self: center;"><span
          style="color: gold;margin: 0px 16px">昆明云体科技有限公司技术支持</span></dv-decoration-7>
    </div>


  </dv-border-box1>
</template>

<script>
import {getSchoolScoreList, getStudentScoreList} from "@/api/business/score.js";
import useUserStore from "@/store/modules/user.js";
import {listGroup, getGroup, delGroup, addGroup, updateGroup} from "@/api/business/group";
import {getScoreBigScreen} from "@/api/business/score.js";

export default {
  name: "index",
  data() {
    const userStore = useUserStore()
    const subList = [
      {id: 7, title: '体育教学设计与实施', description: "12月20日10:00-20:00", time: "2024-12-20T10:00:00"},
      {id: 9, title: '体育活动策划与组织', description: "12月21日08:30-12:00", time: "2024-12-21T08:30:00"},
      {id: 10, title: '民族族健身操展演', description: "12月21日14:00-19:00", time: "2024-12-21T14:00:00"},
      {id: 8, title: '队列队形', description: "12月21日14:00-19:00", time: "2024-12-21T14:00:00"},
      {id: 4, title: '体育教师职业素养测评', description: "12月21日19:30-20:30", time: "2024-12-21T19:30:00"},
      {id: 5, title: '90秒跳绳', description: "12月22日08:30-10:00", time: "2024-12-22T08:30:00"},
      {id: 6, title: '3000米团体跑', description: "12月22日10:10-12:00", time: "2024-12-22T10:30:00"},

    ];
    return {
      selectIndex: 1,
      shoolScoreList: [],
      studentScoreList: [],
      raceId: null,
      userStore,
      subList,
      showSubIndex: 0,
      showSubList: [],
      showGroupIndex: 0,
      groupList: [],
      scoreListConfig: {
        header: ['照片', '序号', '组别', '名称', '单位', '成绩'],
        data: [],
        columnWidth: [100],
        align: ['center'],
        rowNum: 20,
        headerBGC: "rgb(227 33 39 / 72%)",
        oddRowBGC: 'rgb(227 33 39 / 72%)',
        evenRowBGC: 'rgb(185 28 33);',
      }
    }
  },
  mounted() {
    this.raceId = this.$route.query.raceId; // John
    this.getGroupList();
    // this.getSchoolScoreList();
    // this.getStudentScoreList();
    setInterval(() => {
      this.showSubList = [];
      for (let i = 0; i < this.subList.length; i++) {
        let data = new Date(this.subList[i].time);
        if (Date.now() > data) {
          this.showSubList.push(this.subList[i]);
        }
      }
      if (this.showSubList.length >= 2) {
        this.showSubList = this.showSubList.slice(-2);
      }
      if( this.showSubList.length>2){
        this.showSubList.unshift({
          id: -1,
          title: '成绩汇总',
          description: "12月1日10:00-18:30",
          time: "2024-11-02T10:00:00"
        })
      }

      if (this.showGroupIndex < this.groupList.length - 1) {
        this.showGroupIndex++;
      } else {
        this.showGroupIndex = 0;
        if (this.showSubIndex < this.showSubList.length - 1) {
          this.showSubIndex++;
        } else {
          this.showSubIndex = 0;
        }
      }


      this.getScoreBigScreen();
    }, 20000);
  },
  methods: {
    getScoreBigScreen() {
      if (this.showSubList[this.showSubIndex].id == -1) {
        getSchoolScoreList(-1, this.groupList[this.showGroupIndex].id).then(res => {
          let orchestrateWithSubResList = res.data;
          this.scoreListConfig.data = [];
          let data = [];
          this.scoreListConfig.header =  ['logo', '名次', '组别', '名称', '单位', '成绩'];
          for (let i = 0; i < orchestrateWithSubResList.length; i++) {
            let convScore = '';

            data.push(
                [
                  '<img style="width: 40px;height: 40px;object-fit: cover;flex-grow: 1;display: block;border-radius: 50%" src="/dev-api' + orchestrateWithSubResList[i].avatarSrc + '"/>',
                  orchestrateWithSubResList[i].no,
                  orchestrateWithSubResList[i].groupName,
                  orchestrateWithSubResList[i].name,
                  orchestrateWithSubResList[i].unitName,
                  orchestrateWithSubResList[i].score,
                ]
            )
          }
          console.log(data);
          this.scoreListConfig.data = data;
        })
      } else {
        getScoreBigScreen(this.showSubList[this.showSubIndex].id, this.groupList[this.showGroupIndex].id).then(res => {
          let orchestrateWithSubResList = res.data;
          this.scoreListConfig.header =  ['照片', '序号', '组别', '名称', '单位', '成绩'];
          this.scoreListConfig.data = [];
          let data = [];
          for (let i = 0; i < orchestrateWithSubResList.length; i++) {
            let convScore = '';
            if (orchestrateWithSubResList[i].subjectWithItem != null) {
              if (orchestrateWithSubResList[i].subjectWithItem.baseScoreMap['0'] != null) {
                convScore = orchestrateWithSubResList[i].subjectWithItem.baseScoreMap['0'].confirm ? orchestrateWithSubResList[i].subjectWithItem.baseScoreMap['0'].conversionScore : '确认中'
              }
            }
            data.push(
                [
                  '<img style="width: 40px;height: 40px;object-fit: cover;flex-grow: 1;display: block;border-radius: 50%" src="/dev-api' + orchestrateWithSubResList[i].avatarSrc + '"/>',
                  orchestrateWithSubResList[i].no,
                  orchestrateWithSubResList[i].groupName,
                  orchestrateWithSubResList[i].name,
                  orchestrateWithSubResList[i].unitName,
                  convScore
                ]
            )
          }
          console.log(data);
          this.scoreListConfig.data = data;
        })

      }
    },
    getSchoolScoreList() {
      let that = this;
      getSchoolScoreList(this.raceId).then(res => {
        that.shoolScoreList = res.data;
      })
    },
    getStudentScoreList() {
      let that = this;
      getStudentScoreList(this.raceId).then(res => {
        that.studentScoreList = res.data;
      })
    },
    getGroupList() {
      let that = this;
      listGroup(
          {pageSize: 0}
      ).then(response => {
        that.groupList = response.rows;
      });
    },
  }
}
</script>

<style>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.border {
  background-image: url('../../../assets/images/border.png')
}

.loading {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.loading span {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
}

@-webkit-keyframes load {
  0%, 100% {
    height: 40px;
    background: lightgreen;
  }
  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}

.loading span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
}

.loading span:nth-child(3) {
  -webkit-animation-delay: 0.4s;
}

.loading span:nth-child(4) {
  -webkit-animation-delay: 0.6s;
}

.loading span:nth-child(5) {
  -webkit-animation-delay: 0.8s;
}

.dv-scroll-board .header {
  font-size: 32px !important;
}

.dv-scroll-board .rows .row-item {
  font-size: 24px;
}
</style>